<template>
  <el-card class="box-card defaultTable tokenList">
    <el-row :gutter="20" class="title">
      <el-col :xs="4" :sm="5">
        <span class="f14999">AI·生图</span>
        <span class="f18333">{{ user.t_image }}</span>
      </el-col>
      <el-col :xs="4" :sm="5">
        <span class="f14999">AI·语音</span>
        <span class="f18333">{{ user.t_voice }}</span>
      </el-col>
      <el-col :xs="4" :sm="5">
        <span class="f14999">AI·对话次数</span>
        <span class="f18333">{{ user.t_chat }}</span>
      </el-col>
    </el-row>
    <el-table class="tokenTable" v-loading="loading" :data="d.tableData" style="width: 100%">
      <!-- <el-table-column prop="label" label="头像">
        <template #default="scope">
          <el-avatar :size="50" :src="scope.row.admin_avatar" />
        </template>
      </el-table-column> -->
      <el-table-column prop="admin_nickname" label="名称" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="surplus" label="surplus" />
      <el-table-column prop="keyx" label="keyx" />
      <!-- <el-table-column prop="voice_name" label="手机号" /> -->
      <!-- <el-table-column prop="voice_style" label="次数" /> -->
      <el-table-column prop="createtime" label="创建时间" />
    </el-table>
    <el-pagination
      class="justify-content-end p10_0"
      :layout="paginationData.layout"
      :page-sizes="paginationData.pageSizes"
      :total="paginationData.total"
      :page-size="paginationData.pageSize"
      :currentPage="paginationData.currentPage"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
import _ from "lodash"
import dayjs from "dayjs"
import { usePagination } from "@/hooks/usePagination"
import { APIIntegralList } from "@/api/apiSetting"
import { useUserStore } from "@/store/modules/user"
import { storeToRefs } from "pinia"
const userStore = useUserStore()
const { user } = storeToRefs(userStore)

const loading = ref<boolean>(false)
const d = reactive<any>({
  tableData: [],
  paginationData: {
    total: 0,
    currentPage: 1,
    pageSize: 20
  }
})
const { paginationData, handleCurrentChange } = usePagination(d.paginationData)
// 监听分页
watch(
  () => paginationData.currentPage,
  () => {
    initModel()
  }
)

// 初始化
const initModel = async () => {
  userStore.getInfo()
  loading.value = true
  const params = {
    page: paginationData.currentPage
  }
  const { data, code } = await APIIntegralList(params)
  if (code !== 200) return
  paginationData.total = data.count
  d.tableData = data.list.map((item: any) => {
    item.createtime = dayjs.unix(item.createtime).format("YYYY-MM-DD HH:mm:ss")
    return item
  })
  loading.value = false
}

onMounted(() => {
  initModel()
})
</script>
<style lang="scss" scoped>
.tokenList {
  margin-top: 30px;

  .tokenTable {
    margin-top: 30px;
  }

  :deep(th.el-table__cell.is-leaf) {
    border-bottom: none !important;
  }

  :deep(.el-table th.el-table__cell) {
    background: #f9f9f9 !important;
  }

  :deep(th.el-table__cell) {
    font-size: 12px;
    color: #999;
  }

  :deep(.el-table__cell) {
    padding: 8px 20px;
  }

  .title {
    margin: 15px 0;
  }
}

.el-card {
  box-shadow: none;
  border: none;

  .f18333,
  .f14999 {
    margin-right: 10px;
    vertical-align: middle;
  }
}
</style>
